<template>
	<view class="wrapper xinXi">
		<div class="posf center bfff nav-box c9b">
			<div class="f28 posr" :class="type==0?'ctheme':''" @click="type=0">动态通知</div>
			<div class="f28 posr" :class="type==1?'ctheme':''" @click="type=1">政策宣传</div>
		</div>
		<!-- 动态通知 -->
		<div class="main" v-if="type==0">
			<div class="center new-box" v-for="v in list" @click="open(`./xiangqing?id=${v.id}&type=${type}`)">
				<image src="../../../static/shouye/xinxi.png" mode="aspectFill" class="cover mr20"></image>
				<div class="flex1">
					<div class="f24 fbold u-line-3 mb20">{{v.title}}
					</div>
					<div class="space-between f24 c9b">
						<div>{{v.source}}</div>
						<div>{{v.date}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main" v-else>
			<div class="center zheng-box" v-for="v in list" @click="open(`./xiangqing?id=${v.id}&type=${type}`)">
				<div class="f28 nowrap flex1">{{v.title}}</div>
				<div class="colum c9b ml40">
					<div class="f28">{{v.date.substr(8,2)}}</div>
					<div class="f24">{{v.date.substr(0,7)}}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				list:[],
			}
		}, 
		onLoad(){
			this.getpolicyAdvocacy()
		},
		watch:{
			type(){
				this.getpolicyAdvocacy()
			}
		},
		methods: {
			getpolicyAdvocacy(){
				this.$http('/applet/Info/'+(this.type==0?'newsAlert':'policyAdvocacy') ).then(r => {
					console.log(r)
					this.list = r.filter(function(v){
						return v.isDisplay==true
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.zheng-box{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F5F5F5;
	}
	.new-box {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #F5F5F5;

		.cover {
			width: 284rpx;
			height: 160rpx;
			border-radius: 12rpx;
		}
	}

	.nav-box {
		width: 670rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 48rpx 2rpx rgba(65, 124, 243, 0.11);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		left: 38rpx;
		top: 40rpx;
		/* #ifdef H5 */
		top: calc(40rpx + 44px);
		/* #endif */
		z-index: 99;
		.f28 {
			margin: 0 50rpx;
		}

		.ctheme {
			font-size: 32rpx;

			&::after {
				content: '';
				width: 94rpx;
				height: 10rpx;
				background: #0077FF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				position: absolute;
				left: 18rpx;
				bottom: -20rpx;
			}
		}
	}

	.xinXi {
		padding: 140rpx 38rpx;
	}
</style>